<template>
  <div
    :id="newOption.id"
    :style="{
      width: '300x',
      height: '150px',
    }"
  ></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, toRefs } from 'vue'

let myChart = null
const props = defineProps({
  dataset: Array,
  newOption: Object,
})

onMounted(() => {
  const { dataset, newOption } = toRefs(props)
  myChart = echarts.init(document.getElementById(newOption.value.id))
  const option = {
    grid: {
      x: 0,
      y: 45,
      x2: 80,
      y2: 60,
      top: 46,
      bottom: 20,
      left: 40,
      right: 60,
    },
    dataset: {
      source: dataset.value,
    },
    // legend: {
    //     padding:10,
    //     x:'center',
    //     y:40
    // },
    xAxis: {
      type: 'category', // 还有其他的type，可以去官网喵两眼哦
      // data: data,   // x轴数据
      name: newOption.value.xAxisName, // x轴名称
      nameTextStyle: {
        color: '#CFDCFF',
        opacity: 0.85,
        fontWeight: 600,
        fontSize: 10,
      },
      nameGap: 5,
      axisLine: {
        show: true,
        lineStyle: { color: '#5EC9FA' },
      },
      axisLabel: {
        color: '#5EC9FA', //坐标值得具体的颜色
      },
    },
    yAxis: {
      type: 'value',
      // name: '纵轴名称',   // y轴名称
      // y轴名称样式
      name: newOption.value.yAxisName,
      nameTextStyle: {
        color: '#CFDCFF',
        opacity: 0.85,
        fontWeight: 600,
        fontSize: 10,
      },
      axisLine: {
        show: true,
        lineStyle: { color: '#5EC9FA' },
      },
      axisLabel: {
        color: '#5EC9FA', //坐标值得具体的颜色
      },

      splitLine: {
        show: false,
        lineStyle: {
          // 使用深浅的间隔色
          color: ['#000'],
          opacity: 0.2,
        },
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(5,36,102,0.7)', 'rgba(14,47,119,0.7)'],
        },
      },
    },
    label: {
      color: '#5EC9FA',
      show: true,
    },
    tooltip: {
      trigger: 'axis', // axis   item   none三个值
    },
    series: [
      {
        type: 'line',
        symbolSize: 5,
        // lineStyle:{
        //     color:'#5EC9FA'
        // },
        itemStyle: {
          color: '#28B8F8',
        },
        // areaStyle : {
        //     color : {
        //         type: 'linear',
        //         x: 0,
        //         y: 0,
        //         x2: 0,
        //         y2: 1,
        //         colorStops: [{
        //             offset: 1, color: "rgba(94,201,250,0)" // 0% 处的颜色
        //         }, {
        //             offset: 0, color: '#5EC9FA' // 100% 处的颜色
        //         }],
        //     }
        // },
      },
    ],
  }
  myChart.setOption(option)
})
</script>
